<script setup lang="ts">
import StoreCard from '@/components/StoreCard.vue'
import SmallPic from '@/components/SmallPic.vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { Location, StarFilled } from '@element-plus/icons-vue'

const router = useRouter()

const goToStoreList = () => {
  router.push('/storelist')
}

const goToMembership = () => {
  router.push('/membership')
}

const Smallpic = ref([
  {
    url: 'src/assets/pic/dcfl01.png',
    text: '美食'
  },
  {
    url: 'src/assets/pic/dcfl02.png',
    text: '早餐'
  },
  {
    url: 'src/assets/pic/dcfl03.png',
    text: '跑腿代购'
  },
  {
    url: 'src/assets/pic/dcfl04.png',
    text: '汉堡披萨'
  },
  {
    url: 'src/assets/pic/dcfl05.png',
    text: '甜品饮品'
  },
  {
    url: 'src/assets/pic/dcfl06.png',
    text: '速食简餐'
  },
  {
    url: 'src/assets/pic/dcfl07.png',
    text: '地方小吃'
  },
  {
    url: 'src/assets/pic/dcfl08.png',
    text: '米粉面馆'
  },
  {
    url: 'src/assets/pic/dcfl09.png',
    text: '包子粥铺'
  },
  {
    url: 'src/assets/pic/dcfl10.png',
    text: '炸鸡炸串'
  },

])
const cardInformation = ref([
  {
    title: "万家饺子",
    url: "src/assets/pic/sj01.png",
    description: "miaoshu"
  },
  {
    title: "小锅饭豆腐馆",
    url: "src/assets/pic/sj02.png",
    description: "miaoshu"
  },
  {
    title: "麦当劳麦乐送",
    url: "src/assets/pic/sj03.png",
    description: "miaoshu"
  },
  {
    title: "米村拌饭",
    url: "src/assets/pic/sj04.png",
    description: "miaoshu"
  },
  {
    title: "申记串道",
    url: "src/assets/pic/sj05.png",
    description: "miaoshu"
  }
])
</script>

<template>
  <div class="bg-blue-500 w-full fixed top-0 left-0 right-0 h-15 shadow-lg z-1000">
    <el-page-header class="header" icon="">
      <template #content>
        <span class="text-white text-lg font-semibold mr-4"> <el-icon>
            <Location />
          </el-icon>云南大学呈贡校区 </span>
        <div class="w-80% fixed bg-white">
          <div class="text-xs text-gray-500 text-center">
            <el-icon>
              <Search />
            </el-icon>
            搜索饿了么商家、商品名称
          </div>
        </div>
      </template>
    </el-page-header>
  </div>
  <div class="p-2.5 relative w-full h-screen-minus-60 mt-15 ml-0 mr-0 pl-0 pr-0 flex flex-wrap">

    <small-pic
      v-for="smallpic in Smallpic"
      :key="smallpic.text"
      :text="smallpic.text"
      :imageUrl="smallpic.url"
      @click="goToStoreList">
    </small-pic>

    <div class="w-full h-full">
      <div class="bg-contain w-full h-20% bg-index-banner">
        <h1>品质套餐</h1>
        <h5 class="text-gray-500">有搭配吃得好</h5>
        <h3 class="text-yellow-600">点击下方立即抢购>></h3>
      </div>
      <div class="bg-yellow-100 flex flex-row items-center">
        <h2><strong><el-icon>
              <Eleme />
            </el-icon>超级会员</strong></h2>
        <h4 class="cursor-pointer hover:text-blue-600 transition-colors" @click="goToMembership">
          立即订阅会员！ 立即开通>>>
        </h4>
      </div>
      <div class="w-full flex flex-row items-center justify-center">
        <img src="D:\project_all\elm\src\assets\pic\line.png">推荐商家<img src="D:\project_all\elm\src\assets\pic\line.png">
      </div>
      <div class="w-full flex flex-row items-center justify-between">
        <div>综合排序<el-icon>
            <CaretBottom />
          </el-icon></div>
        <div>距离最近</div>
        <div>销量最高</div>
        <div>筛选<el-icon>
            <Shop />
          </el-icon></div>
      </div>
      <store-card
        v-for="option in cardInformation"
        :key="option.title"
        :title="option.title"
        :image-url="option.url"
        :description="option.description">
        <el-divider>
          <el-icon><star-filled /></el-icon>
        </el-divider>
      </store-card>
    </div>

  </div>


</template>
